<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./optional.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_785499_281tjluw53.css">
</head>
<body>

<div class="all">

    <div class="header">
        <div class="header_l">
            <div>我的自选</div>
            <i class="iconfont icon-jiantouarrow486"></i>
        </div>

        <div class="header_r"><i class="iconfont icon-sousuo"></i></div>
    </div>

    <div class="content">
    <div class="nav">
        <div class="underline">全部</div>
        <div>沪深</div>
        <div>港股</div>
        <div>美股</div>
    </div>
        <div class="shangzheng">
            <div class="s_left" style="display: flex;
          justify-content: space-around;">
                <div >
                    <div style="color:#545454;font-size:13px;height:32px;line-height: 32px">上证指数</div>
                    <div style="color:#f11515;font-size:13px;height:13px;line-height: 13px">2794.38</div>
                    <div style="color:#f11515;font-size:9px;height:25px;line-height: 25px">1,83% 50.31</div>
                </div>
                <div class="jiantou" style="line-height: 70px;text-align: center;width: 20px;">
                    <div class="iconfont icon-jiantou" style="font-size:5px;"></div>
                </div>
            </div>
            <div style="background: #e1e1e1;height: 31px;width: 1px;margin-top: 19px;margin-left: -20px;"></div>
            <div class="s_right"><li class="iconfont icon-guandian"></li><div>观点</div></div>
            <div class="s_right"><li class="iconfont icon-xinwen"></li><div>新闻</div></div>
            <div class="s_right"><li class="iconfont icon-Rectangle-path"></li><div>公告</div></div>
            <div class="s_right" style="width:56px;"><li class="iconfont icon-etf" style="margin-left: 13px;"></li><div >百万股神</div></div>
        </div>

        <div class="Tj">
            <div class="tj">
                <div class="iconfont icon-hao fir"></div>
                <div class="sec">点击添加</div>
            </div>
            <div class="sd"><span style="color: #7d7d7d;">手动添加太麻烦？</span><span style="color:#7fa0c3">试试图片识别 ></span></div>

        </div>
    </div>
    <div class="dingwei">
        <div class="sz">

        </div>
    </div>
    <div class="footer"></div>
</div>

<style>
    *{
        margin: 0;
        padding: 0;

    }
    html{
        height: 100%;

    }
    body{
        height: 100%;
        width: 100%;
    }
</style>
<script>
    function  $(select) {
        let dom = document.querySelector(select);
        return dom;
    }
    console.log($('.jiantou'));
    $('.jiantou').addEventListener('click',function () {
        if(this.children[0].className==="iconfont icon-jiantou"){
            this.children[0].className = 'iconfont icon-jiantou3up';
            $('.dingwei').style.display = 'block';
        }else {
            this.children[0].className = 'iconfont icon-jiantou'
            $('.dingwei').style.display = 'none';
        }
    })
</script>
</body>
</html>

